<template>
  <nav class="nav">
    <me-loading v-if="!Pages.length"></me-loading>
    <me-slider
      :direction="direction"
      :loop="loop"
      :interval="interval"
      :pagination="pagination"
      v-else
    >
      <swiper-slide v-for="(page, index) of Pages" :key="index">
        <ul class="nav-list">
          <li
            class="nav-item"
            v-for="item in page"
            :key="item.id">
            <a :href="item.linkUrl" class="nav-link">
              <img :src="item.picUrl" class="nav-pic">
              <span>{{item.text}}</span>
            </a>
          </li>
        </ul>
      </swiper-slide>
    </me-slider>
  </nav>
</template>

<script>
import {navItems, navOptions} from './config'
import MeSlider from 'base/slider'
import {swiperSlide} from 'vue-awesome-swiper'
import MeLoading from 'base/loading'
export default {
  name: 'HomeNav',
  components: {
    MeSlider,
    MeLoading,
    swiperSlide
  },
  data () {
    return {
      direction: navOptions.direction,
      loop: navOptions.loop,
      interval: navOptions.interval,
      pagination: navOptions.pagination,
      navs: []
    }
  },
  created () {
    this.Pages = this.getPages()
    // console.log(this);
  },
  methods: {
    getPages () {
      this.navs = navItems
      const pages = []
      this.navs.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixins";

  .nav {
    width: 100%;
    padding-top: 15px;
    background-color: #fff;

    &-list {
      display: flex;
      flex-wrap: wrap;
    }

    &-item {
      width: 20%;
      margin-bottom: 15px;
    }

    &-link {
      @include flex-center(column);
    }

    &-pic {
      width: 60%;
      margin-bottom: 8px;
    }
  }

</style>
